<template>
    <div class="topBackContainer">
        <video
            class="backgroundVideo"
            src="/src/assets/video/careers/index/topBackVideo.mp4"
            autoplay
            loop
            muted
            playsinline
        />
        <div class="careersText">
            <h1>CAREERS</h1>
            <p>We create games that are played for years and<br/>remembered forever.</p>
        </div>
    </div>
</template>

<style scoped>
.topBackContainer {
    position: relative;
    height: 70vh;
    width: 100%;
    object-fit: cover;
}

.backgroundVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;

}

.careersText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); /* 文字阴影更醒目 */
}

.careersText h1 {
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.careersText p {
    font-size: 22px;
    margin-bottom: 32px;
    line-height: 1.6;
}
</style>
